<template>
  <view class="tabsBottom">
    <view class="tabs2">
      <view :class="['tabs2Item', state.tabId === item.id ? 'tabs2ItemHover' : '']" v-for="(item,index) in tabs2" :key="index" @click="changeTab2(item)">
        {{item?.name}}
      </view>
    </view>
    <view class="list">
      <view :class="['listItem', item.id == state.currentItemId ? 'listItemHover' : '']" @click="openTuikuan(item)" v-for="(item, index) in orderList" :key="index">
        <view class="left">
          <view class="text">
            <view class="span">{{item?.order_no}}</view>
            <view class="text02">{{item?.name}}</view>
          </view>
          <view class="text03">
            技术要求:
            <view class="span" v-if="item?.software_ask_one">{{item?.software_ask_one}}</view>
            <view class="span" v-if="item?.software_ask_two">{{item?.software_ask_two}}</view>
            <view class="span" v-if="item?.software_ask_three">{{item?.software_ask_three}}</view>
          </view>
        </view>
        <view class="middle">
          <view class="item">
            <text>接单价</text>
            <text class="price">{{item.price}}</text>
          </view>
          <view class="item">
            <text>已付款</text>
            <text class="price">{{item?.yet_price}}</text>
          </view>
        </view>
        <view class="middle" style="border-right: none;">
          <view class="item">
            <text>派单价</text>
            <text class="price">{{item.send_price}}</text>
          </view>
          <view class="item">
            <text>已结款</text>
            <text class="price">{{item.yet_send_price}}</text>
          </view>
        </view> 
      </view>
    </view>
  </view>
  <TuikuanPopup ref="childRef" :currentItem="state.currentItem" @refresh="refresh"/>
</template>

<script setup>
  import { tabs2 } from '../data';
  import { ref, reactive, nextTick } from 'vue'
  import TuikuanPopup from '@/components/tuikuanPopup.vue'
  import { getOrderIndex } from "@/utils/front.js"
  import { onShow } from '@dcloudio/uni-app'
  const emits = defineEmits(["getOrderlist"]);
  const state = reactive({
    tabId : 1,
    page: 1,
    currentItemId: null,
    currentItem: {}
  })
  const props = defineProps({
    orderList: {
      type: Array,
      default: () => ([])
    }
  })
  const childRef = ref(null);
  onShow(() => {
    refresh()
  })
  const refresh = () => {
    console.log(72, state.tabId, state.page)
    emits('getOrderlist', {tabId: state.tabId, page: state.page})
  }
  const changeTab2 = (item) => {
    state.tabId = item.id
    nextTick(() => {
      refresh()
    })  
  }
  const openTuikuan = (item) => {
    state.currentItemId = item.id
    state.currentItem = item
    childRef.value?.openPopup()
  }

  
</script>

<style lang="scss" scoped>
  .tabsBottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    width: 714rpx;
    .tabs2{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      border-bottom: 2rpx solid rgba(65, 65, 65, 1);
      padding-bottom:30rpx;
      .tabs2Item{
        width: 64rpx;
        height: 34rpx;
        border-radius: 6rpx;
        border: 2rpx solid rgba(107, 107, 107, 1); 
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        text-align: center;
        color: rgba(122, 122, 122, 1);
        margin-left: 30rpx;
        margin-right: 30rpx;
      }
      .tabs2ItemHover{
        border: 2rpx solid rgba(11, 105, 218, 1);
        background: rgba(209, 218, 243, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .list{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: calc(100vh - 460px);
      padding-bottom: 20px;
      overflow: scroll;
      .listItem{
        width: 650rpx;
        height: 88rpx;
        border-radius: 6px;
        border: 4rpx solid rgba(209, 243, 241, 1);
        background: rgba(209, 243, 241, 1);
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        .left{
          width: 310rpx;
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height:100%;
          .text{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 20rpx;
            color: rgba(60, 60, 60, 1);
            .span{
              margin-right:20rpx;
              .text02{
                width:118rpx;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          .text03{
            width: 310rpx;
            height: 34rpx;
            border-radius: 14rpx;
            background: rgba(247, 247, 247, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 16rpx;
            text-align: center;
            color: rgba(60, 60, 60, 1);
            margin-top:10rpx;
            .span{
              margin-left: 6rpx;
            }
          }
        }
        .middle{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          border-right:  2rpx dashed rgba(85, 85, 85, 1);
          padding-right: 20rpx;
          .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 16rpx;
            text{
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 16rpx;
              text-align: center;
              color: rgba(60, 60, 60, 1);
            }
            .price{
              font-size: 24rpx;
              margin-top:6rpx;
            }
          }
        }
      }
      .listItemHover{
        border: 4rpx solid rgba(135, 255, 124, 1);
      }
    }
  }
</style>